<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Getting Familiar with CSS3 Transition</title>
    <link rel = "stylesheet" href="css/css3transition.css" />
</head>
<body>
    <header>
        <h1>Getting Familiar With CSS3 Transition</h1>
    </header>
    <section id = "game">
        <div id = "cards">
            <div id = "card1" class="card cardAK"></div>
            <div id = "card2" class = "card cardAQ"></div>
        </div> <!--#card-->
    </section>  <!--#game-->
    <footer>
        <p> This is an example of transitioning cards.</p>
    </footer>
    <script src = "js/jquery-3.3.1.js"></script>
    <script>
        $(function() {
            $("#card1").addClass("moveAndScale")
            $("#card2").addClass("rotateRight")
        })
    </script>
</body>
</html>